<template>
    <div class="page">
        
        <div class="car-info">
            <h2 class="title">车辆基本信息</h2>
            <Form ref="carBaseForm" :model="carBaseData" :rules="carBaseRuleValidate" :label-width="120">
                <FormItem label="汽车icon" prop="icon">
                    <Row>
                        <Col>
                            <div class="show-car-icon" >
                                <CarIconView :data="carBaseData.icon">
                                </CarIconView>
                            </div>
                        </Col>
                    </Row>
                    <Row>
                        <Col span="4">
                            <Button type="primary" @click="onClickUploadBtn">上传图片</Button>
                        </Col>
                    </Row>
                </FormItem>

                <FormItem label="移动端二维码" prop="icon">
                    <Row>
                        <Col span="8" v-show="qrcodeShow">
                            <div>
                                <canvas id="car_qrcode_panel"></canvas>
                            </div>
                            <div style="padding-left: 15px;">
                                <Button type="primary" @click="onClickDownLoadQrcodeBtn">下载二维码</Button>
                            </div>
                        </Col>
                    </Row>
                </FormItem>

                <FormItem label="名称：" prop="name">
                    <Row>
                        <Col span="8">
                            <Input v-model="carBaseData.name" placeholder="请输入名称,48个字符长度" :maxlength="48"/>
                        </Col>
                    </Row>
                </FormItem>

                <Row>
                    <Col span="8">
                        <FormItem label="发动机号：" prop="engineNo">
                            <Input v-model="carBaseData.engineNo" placeholder="请输入发动机号,16个字符长度" :maxlength="16"/>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="行驶证号：" prop="vehicleLicense">
                            <Input v-model="carBaseData.vehicleLicense" placeholder="请输入行驶证号,64个字符长度" :maxlength="64"/>
                        </FormItem>
                    </Col>
                </Row>

                <Row>
                    <Col span="8">
                        <FormItem label="公里数：" prop="km">
                            <InputNumber :max="600000" :min="1" v-model="carBaseData.km" style="width: 200px;" placeholder="单位公里"/>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="汽车车龄：" prop="year">
                            <InputNumber :max="9999" :min="1" v-model="carBaseData.year" style="width: 200px;" placeholder="如2019"/>
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="8">
                        <FormItem label="过户次数：" prop="transferNum">
                            <InputNumber :max="20" :min="0" v-model="carBaseData.transferNum" placeholder="0"/>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="车辆报价：" prop="quotePrice">
                            <InputNumber :max="99999999" :min="1" v-model="carBaseData.quotePrice" style="width: 200px;" placeholder="单位元"/>
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="8">
                        <FormItem label="车辆首付款：" prop="downPrice">
                            <InputNumber :max="99999999" :min="1" v-model="carBaseData.downPrice" style="width: 200px;" placeholder="单位元"/>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="厂商价格：" prop="factoryPrice">
                            <InputNumber :max="99999999" :min="1" v-model="carBaseData.factoryPrice" style="width: 200px;" placeholder="单位元"/>
                        </FormItem>
                    </Col>
                </Row>
                <FormItem label="是否上架：" prop="isShelf">
                    <Row>
                        <Col span="6">
                            <RadioGroup v-model="carBaseData.isShelf">
                                <Radio label="0">下架</Radio>
                                <Radio label="1">上架</Radio>
                            </RadioGroup>
                        </Col>
                        <Col span="1">
                        </Col>
                        <Col span="6">
                            <span>上架时间：</span>
                            <span>{{carBaseData.shelfTime | formatTimestamp}}</span>
                        </Col>
                    </Row>
                </FormItem>
                <FormItem label="是否售出：" prop="isSellOut">
                    <Row>
                        <Col span="6">
                            <RadioGroup v-model="carBaseData.isSellOut">
                                <Radio label="0">未售出</Radio>
                                <Radio label="1">售出</Radio>
                            </RadioGroup>
                        </Col>
                        <Col span="1">
                        </Col>
                        <Col span="6">
                            <span>售出时间：</span>
                            <span>{{carBaseData.sellOutTime | formatTimestamp}}</span>
                        </Col>
                    </Row>
                </FormItem>
                <FormItem label="创建时间：" prop="createTime">
                    <Row>
                        <Col span="8">
                            <span>{{carBaseData.createTime | formatTimestamp}}</span>
                        </Col>
                    </Row>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="handleSubmit">保存基本信息</Button>
                </FormItem>
            </Form>
        </div>

        <div class="car-info">
            <h2 class="title">车辆属性信息</h2>
            <Form ref="carProForm" :model="carProData" :rules="carProRuleValidate" :label-width="120">
                <Row>
                    <Col span="8">
                        <FormItem label="车牌所在地" prop="plateSite">
                            <RadioGroup v-model="carProData.plateSite">
                                <Radio label="1">本地</Radio>
                                <Radio label="2">外地</Radio>
                            </RadioGroup>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="品牌" prop="brandId">
                            <Select v-model="carProData.brandId" style="width:200px">
                                <Option v-for="(item, index) in carTypes" :key="index" :value="item.type">
                                    {{item.title}}
                                </Option>
                            </Select>
                        </FormItem>
                    </Col>
                </Row>

                <Row>
                    <Col span="8">
                        <FormItem label="变速箱类型" prop="gearBox">
                            <Select v-model="carProData.gearBox" style="width:200px">
                                <Option :value="1">手动</Option>
                                <Option :value="2">自动</Option>
                                <Option :value="3">手动一体</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="排量毫升" prop="volume">
                            <InputNumber :max="99999" :min="1" v-model="carProData.volume" style="width: 200px;" placeholder="单位毫升"/>
                        </FormItem>
                    </Col>
                    
                </Row>

                <Row>
                    <Col span="8">
                        <FormItem label="座位数" prop="seatNum">
                            <InputNumber :max="127" :min="1" v-model="carProData.seatNum" style="width: 200px;" placeholder="0-127范围内"/>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="排放标准" prop="volumeStand">
                            <Select v-model="carProData.volumeStand" style="width:200px">
                                <Option :value="1">国一</Option>
                                <Option :value="2">国二</Option>
                                <Option :value="3">国三</Option>
                                <Option :value="4">国四</Option>
                                <Option :value="5">国五</Option>
                                <Option :value="6">国六</Option>
                            </Select>
                        </FormItem>
                    </Col>
                </Row>

                <Row>
                    <Col span="8">
                        <FormItem label="车身颜色" prop="color">
                            <Select v-model="carProData.color" style="width:200px">
                                <Option v-for="(item, index) in colors" :key="index" :value="item.type">
                                    <i class="car-color" v-bind:style="{backgroundColor: item.bgc, borderColor: item.bc}"></i>
                                    {{item.title}}
                                </Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="燃油类型" prop="fuelType">
                            <Select v-model="carProData.fuelType" style="width:200px">
                                <Option :value="0">其他</Option>
                                <Option :value="1">汽油</Option>
                                <Option :value="2">柴油</Option>
                                <Option :value="3">电动</Option>
                                <Option :value="4">油电混合</Option>
                            </Select>
                        </FormItem>
                    </Col>
                </Row>

                <Row>
                    <Col span="8">
                        <FormItem label="驱动类型" prop="driveType">
                            <Select v-model="carProData.driveType" style="width:200px">
                                <Option :value="1">两驱</Option>
                                <Option :value="2">四驱</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="国别" prop="differCountry">
                            <Select v-model="carProData.differCountry" style="width:200px">
                                <Option :value="0">其他</Option>
                                <Option :value="1">德系</Option>
                                <Option :value="2">日系</Option>
                                <Option :value="3">美系</Option>
                                <Option :value="4">法系</Option>
                                <Option :value="5">韩系</Option>
                                <Option :value="6">国产</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    
                </Row>
                <Row>
                    <Col span="8">
                        <FormItem label="车型" prop="motoType">
                            <Select v-model="carProData.motoType" style="width:200px">
                                <Option v-for="(item, index) in carTypes" :key="index" :value="item.type">
                                    <Icon custom="iconfont car-type-icon" v-bind:class="item.icon" size="18" />
                                    {{item.title}}
                                </Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="8">
                    </Col>
                </Row>
                <FormItem>
                    <Button type="primary" @click="handleSubmitCarPro()">保存车辆属性信息</Button>
                </FormItem>
            </Form>
        </div>

        <div class="car-info">
            <h2 class="title">车况简介</h2>
            <div class="car-panel">
                <Row>
                    <Col span="1">
                        <span>车况标签</span>
                        &nbsp;&nbsp;
                    </Col>
                    <Col span="13">
                        <CarBriefView :data="carExtData.carBrief">
                        </CarBriefView>
                    </Col>
                </Row>
                <br>
                <Row>
                    <Col span="1">
                        <span>车况图文</span>
                        &nbsp;&nbsp;
                    </Col>
                    <Col span="13">
                        <CarBriefImgTxtView :data="carExtData.imgBrief">
                        </CarBriefImgTxtView>
                    </Col>
                </Row>
                <br>
                <Row>
                    <Col span="1">
                        &nbsp;
                    </Col>
                    <Col span="13">
                        <Button type="primary" @click="onClickSaveCarBriefTagBtn">保存车况信息</Button>
                    </Col>
                </Row>
            </div>
        </div>
        <div class="car-info">
            <h2 class="title">车辆报告</h2>
            <div class="car-panel">
                <div>
                    <Row>
                        <Col span="2">
                            检查报告内容
                        </Col>
                        <Col span="8">
                            <Input type="textarea" :rows="4" v-model="carReportData.content" placeholder="请输入名称,48个字符长度"/>
                        </Col>
                    </Row>
                    <br>
                </div>
                <div>
                    <Row>
                        <Col span="16">
                            <p style="font-size: 16px;">检查项 <span style="font-size: 16px;color: red;">(请对有问题的项打对勾)</span></p>
                        </Col>
                    </Row>
                    <div class="check-panel">
                        <!-- 检查 -->
                        <div class="check-categroy" v-for="(item, index) in carReportData.carCheckItem" :key="index">
                            <div class="title-header">
                                <p class="title-txt">{{item.groupTitle}}</p>
                                <!-- <p class="categroy-check-desc">修复需要一定成本，可能对车辆性能造成影响</p> -->
                            </div>
                            <div class="categroy-content" v-for="(subGroup, subGroupIndex) in item.subGroup" :key="subGroupIndex">
                                <div class="categroy-total" @click="onClickCarCheckSubGroup(subGroup)" >
                                    <span>{{subGroup.subTitle}}</span>
                                    <div>
                                        <span style="margin-right:5px;">{{subGroup.subItem.length}}项</span>
                                        <!-- <span class="iconfont icon-common-chahao"></span>
                                        <span class="iconfont icon-common-duigou"></span> -->
                                        <span class="iconfont" v-bind:class="[ subGroup.sel ? 'icon-common-arrow-up' : 'icon-common-arrow' ]"></span>
                                    </div>
                                </div>
                                <ul class="categroy-items" v-bind:style="{ display: subGroup.sel ? 'block' :'none' }">
                                    <li v-for="(subItem, itemIndex) in subGroup.subItem" :key="itemIndex">
                                        <span>{{subItem.title}}</span>
                                        <Checkbox class="item-icon" :value="subItem.sel" v-model="subItem.sel" @on-change="carCheckItemChange"></Checkbox>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <br>
                <Row>
                    <Col span="3">
                        &nbsp;
                    </Col>
                    <Col span="13">
                        <Button type="primary" @click="handleSubmitCarReport()">保存监测报告</Button>
                    </Col>
                </Row>
            </div>
        </div>
        <!-- 操作弹窗 -->
        <CropperImgModal v-if="uploadImg.isShow"
            :data="uploadImg"
            @on-action-cropper-res="onActionCropperImgRes">
        </CropperImgModal> 
    </div>
</template>
<script>
import carService from '@/network/service/CarService.js'
import serviceException from '@/network/ServiceException.js'
import CropperImgModal from './view/CropperImgModal.vue'
import CarIconView from './view/CarIconView.vue'
import CarBriefView from './view/CarBriefView.vue'
import CarBriefImgTxtView from './view/CarBriefImgTxtView.vue'
import QRCode from 'qrcode'

import AppConstants from '@/constants/AppConstants.js';
import net from '@/network/net.js';

export default {
    components: {
        CropperImgModal,
        CarIconView,
        CarBriefView,
        CarBriefImgTxtView
    },
    data () {
        return {
            // 汽车基本信息数据定义
            carBaseData: {
                id: null,
                icon: new Array(),
                name: null,
                engineNo: null,
                vehicleLicense: null,
                km: null,
                year: null,
                quotePrice: null,
                downPrice: null,
                factoryPrice: null,
                createTime: null,
                isShelf: null,
                shelfTime: null,
                isSellOut: null,
                sellOutTime: null,
                transferNum: null
            },
            carBaseRuleValidate: {
                name: [
                    { required: true, message: '请输入名称,48个字符长度', trigger: 'blur' }
                ],
                engineNo: [
                    { required: true, message: '请输入发动机号,16个字符长度', trigger: 'blur' }
                ],
                vehicleLicense: [
                    { required: true, message: '请输入行驶证号,64个字符长度', trigger: 'blur' }
                ],
                km: [
                    { type: 'number', required: true, message: '请输入公里数', trigger: 'change' }
                ],
                year: [
                    { type: 'date', required: true, message: '请输入从那年购买', trigger: 'change' }
                ],
                quotePrice: [
                    { type: 'number', required: true, message: '请输入车辆报价', trigger: 'change' }
                ],
                downPrice: [
                    { type: 'number', required: true, message: '请输入首付款', trigger: 'change' }
                ],
                factoryPrice: [
                    { type: 'number', required: true, message: '请输入厂商报价', trigger: 'change' }
                ],
                // isShelf: [
                //     { required: true, message: '请选择是否上架', trigger: 'change' }
                // ],
                // isSellOut: [
                //     { required: true, message: '请选择是否售出', trigger: 'change' }
                // ],
                transferNum: [
                    { type: 'number', required: true, message: '请输入过户次数', trigger: 'change' }
                ]
            },
            // 汽车属性数据定义
            carProData: {
                id: null,
                brandId: null,
                plateSite: null,
                gearBox: null,
                volume: null,
                seatNum: null,
                volumeStand: null,
                color: null,
                fuelType: null,
                driveType: null,
                differCountry: null,
                motoType: null
            },
            carProRuleValidate: {
                plateSite: [
                    { required: true, message: '请选择车牌所在地', trigger: 'change' }
                ],
                brandId: [
                    { type: 'number', required: true, message: '请选择品牌', trigger: 'change' }
                ],
                gearBox: [
                    { type: 'number', required: true, message: '请选择变速箱类型', trigger: 'change' }
                ],
                volume: [
                    { type: 'number', required: true, message: '请输入排量', trigger: 'change' }
                ],
                seatNum: [
                    { type: 'number', required: true, message: '请输入座位数', trigger: 'change' }
                ],
                volumeStand: [
                    { type: 'number', required: true, message: '请选择排放标准', trigger: 'change' }
                ],
                color: [
                    { type: 'number', required: true, message: '请选择车身颜色', trigger: 'change' }
                ],
                fuelType: [
                    { type: 'number', required: true, message: '请选择燃油类型', trigger: 'change' }
                ],
                driveType: [
                    { type: 'number', required: true, message: '请选择驱动类型', trigger: 'change' }
                ],
                differCountry: [
                    { type: 'number', required: true, message: '请选择国别', trigger: 'change' }
                ],
                motoType: [
                    { type: 'number', required: true, message: '请选择车型', trigger: 'change' }
                ]
            },
            colors: [
                {type:1, title:'黑色', bgc:'black',bc:'black'},
                {type:2, title:'白色', bgc:'white',bc:'#e6e6e6'},
                {type:3, title:'银灰色', bgc:'#dfe1de',bc:'#dfe1de'},
                {type:4, title:'深灰色', bgc:'#707070',bc:'#707070'},
                {type:5, title:'红色', bgc:'#ff5350',bc:'#ff5350'},
                {type:6, title:'橙色', bgc:'#ffa13f',bc:'#ffa13f'},
                {type:7, title:'绿色', bgc:'#87e869',bc:'#87e869'},
                {type:8, title:'蓝色', bgc:'#4ec1ff',bc:'#4ec1ff'},
                {type:9, title:'咖啡色', bgc:'#99691f',bc:'#99691f'},
                {type:10, title:'紫色', bgc:'#d584e9',bc:'#d584e9'},
                {type:11, title:'香槟色', bgc:'#ead795',bc:'#ead795'},
                {type:12, title:'黄色', bgc:'#ffd943',bc:'#ffd943'},
                {type:0, title:'其他色', bgc:'#e8e8e8',bc:'#e8e8e8'}
            ],
            carTypes:[
                {type:1,title:'两厢车',icon:'icon-car-type-liangxiang'},
                {type:2,title:'三厢车',icon:'icon-car-type-sanxiang'},
                {type:3,title:'跑车',icon:'icon-car-type-paoche'},
                {type:6,title:'面包车',icon:'icon-car-type-mianbaoche'},
                {type:7,title:'皮卡',icon:'icon-car-type-pika'},
                {type:4,title:'SUV',icon:'icon-car-type-suv'},
                {type:5,title:'MPV',icon:'icon-car-type-mpv'}
            ],
            uploadImg: {
                isShow: false
            },
            qrcodeShow: false,
            // 汽车扩展数据定义
            carExtData: {
                id: null,
                carBrief: [],
                imgBrief: [],
                playPlateTime: null,
            },
            carReportData: {
                id: null,
                content: '',
                checkItem: [],
                carCheckItem: [],
            },
        }
    },
    methods: {
        getCarDetail() {
            let that = this;
            carService.getCarDetail(this.carBaseData.id).then(res => {
                let result = res.data;
                let code = result.rescode;
                if (code == 100) {
                    that.carBaseData = result.data.car;
                    that.carBaseData.icon = JSON.parse(result.data.car.icon);
                    that.carProData = result.data.carPro;

                    if(result.data.carExt.carBrief!=null && result.data.carExt.carBrief!=''){
                        that.carExtData.carBrief = JSON.parse(result.data.carExt.carBrief);
                    }else {
                        that.carExtData.carBrief = [];
                    }

                    if(result.data.carExt.imgBrief!=null && result.data.carExt.imgBrief!=''){
                        that.carExtData.imgBrief = JSON.parse(result.data.carExt.imgBrief);
                    }else {
                        that.carExtData.imgBrief = [];
                    }

                    that.carReportData = result.data.carReport;

                    that.carReportData.checkItem = JSON.parse(that.carReportData.checkItem);
                    that.carReportData.carCheckItem = JSON.parse(that.carReportData.carCheckItem);
                
                    that.showCarQrcode(that.carBaseData.id);
                }else {
                    console.log(result.msg);
                }
            }, error => {
                serviceException.netError(error);
            });
        },
        saveCarBase() {
            let that = this;
            carService.saveCarBase(this.carBaseData.id,JSON.stringify(this.carBaseData.icon),
                this.carBaseData.name,this.carBaseData.engineNo,this.carBaseData.vehicleLicense,
                this.carBaseData.km,
                this.carBaseData.year,this.carBaseData.quotePrice,this.carBaseData.downPrice,
                this.carBaseData.factoryPrice,this.carBaseData.isShelf,
                this.carBaseData.isSellOut,this.carBaseData.transferNum).then(res => {
                let result = res.data;
                let code = result.rescode;
                if (code == 100) {
                    that.carBaseData.id=result.data.id;
                    that.getCarDetail();
                    that.$Message.success('保存成功');
                }else {
                    console.log(result.msg);
                }
            }, error => {
                serviceException.netError(error);
            });
        },
        saveCarPro() {
            let that = this;
            carService.saveCarPro(this.carBaseData.id,this.carProData.brandId,this.carProData.plateSite,
                this.carProData.gearBox,this.carProData.volume,this.carProData.seatNum,
                this.carProData.volumeStand,this.carProData.color,this.carProData.fuelType,
                this.carProData.driveType,this.carProData.differCountry,this.carProData.motoType).then(res => {
                let result = res.data;
                let code = result.rescode;
                if (code == 100) {
                    that.getCarDetail();

                }else {
                    console.log(result.msg);
                }
            }, error => {
                serviceException.netError(error);
            });
        },
        handleSubmit () {
            this.$refs['carBaseForm'].validate((valid) => {
                if (valid) {
                    this.saveCarBase();
                } else {
                    this.$Message.error('车辆基本信息校验失败!');
                }
            })
        },
        handleSubmitCarPro() {
            this.$refs['carProForm'].validate((valid) => {
                if (valid) {
                    this.saveCarPro();
                } else {
                    this.$Message.error('车辆属性信息校验失败!');
                }
            })
        },
        onClickUploadBtn() {
            this.uploadImg.isShow=true;
        },
        onActionCropperImgRes(data){
            console.log(this.carBaseData.icon);
            this.carBaseData.icon.push(data);
            this.$set(this.carBaseData.icon, this.carBaseData.icon.length-1, data); 
            //this.carBaseData.icon.splice(this.carBaseData.icon.length-1,1,data);
            //Vue.set( this.carBaseData.icon, this.carBaseData.icon.length-1, data )
        },
        showCarQrcode(id){
            if( id != null && id !='' ){
                let linkUrl = AppConstants.webUrlRoot + '#/carDetail?id='+id;
                var carQrcodeCanvas = document.getElementById('car_qrcode_panel');
                QRCode.toCanvas(carQrcodeCanvas, linkUrl, function (error) {
                    //console.log(error)
                });
                this.qrcodeShow = true;
            }
        },
        // 下载二维码
        onClickDownLoadQrcodeBtn(){
            let carQrcodeCanvas = document.getElementById('car_qrcode_panel');
            let img = carQrcodeCanvas.toDataURL("image/png");
            console.log(img);
            let filename = this.carBaseData.name +'-'+this.carBaseData.id+".png";
            this.saveFile(img,filename);
        },
        saveFile(data, filename){
            var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
            save_link.href = data;
            save_link.download = filename;

            var event = document.createEvent('MouseEvents');
            event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            save_link.dispatchEvent(event);
        },
        onClickSaveCarBriefTagBtn(){
            let that = this;
            carService.saveCarExt(this.carBaseData.id,
                JSON.stringify(this.carExtData.carBrief),
                JSON.stringify(this.carExtData.imgBrief)).then(res => {
                let result = res.data;
                let code = result.rescode;
                if (code == 100) {
                    that.$Message.success('保存成功');
                }else {
                    console.log(result.msg);
                    that.$Message.error('保存失败');
                }
            }, error => {
                serviceException.netError(error);
                that.$Message.error('异常');
            });
        },
        handleSubmitCarReport(){
            let that = this;

            let selItem = new Array();
            let group;
            let subGroup;
            let subItem;
            for(let i = 0,groupLen=that.carReportData.carCheckItem.length; i < groupLen; i++) {
                group = that.carReportData.carCheckItem[i];
                for (let j = 0,subGroupLen=group.subGroup.length; j < subGroupLen; j++) {
                    subGroup = group.subGroup[j];
                    for (let k = 0,subItemLen=subGroup.subItem.length; k < subItemLen; k++) {
                        subItem = subGroup.subItem[k];
                        if(subItem.sel){
                            selItem.push(subItem.no);
                        }
                    }
                }
            }
            console.log(selItem);

            carService.saveCarReport(this.carBaseData.id,
                this.carReportData.content,
                JSON.stringify(selItem)).then(res => {
                let result = res.data;
                let code = result.rescode;
                if (code == 100) {
                    that.$Message.success('保存成功');
                }else {
                    console.log(result.msg);
                    that.$Message.error('保存失败');
                }
            }, error => {
                serviceException.netError(error);
                that.$Message.error('异常');
            });
        },
        onClickCarCheckSubGroup(subGroup){
            subGroup.sel = !subGroup.sel;
        },
        carCheckItemChange(res){
            console.log(res);
        }
        
    },
    mounted() {
        this.carBaseData.id=this.$route.query.id;
        if(this.carBaseData.id != null){
            this.getCarDetail();
        }
    }
}
</script>

<style lang="less" scoped>
.page {
    .car-info {
        border: 1px solid #eee;
        border-radius: 6px;
        margin-top: 10px;
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: 10px;
        position: relative;
        transition: all .2s ease-in-out;

        .title {
            margin-left: 10px;
            margin-top: 10px;
            margin-bottom: 10px;
        }
        .car-panel {
            padding: 10px;

            .check-panel {
                background-color: #f8f8f8;
                width: 600px;
            }

            .check-categroy {
                background-color: #fff;
                padding: 15px 0 0 0;
                margin-top: 6px;
                .title-header {
                    padding: 0 15px;
                }
                .title-txt {
                    font-size: 16px;
                    color: #495056;
                    font-weight: 500;
                }
                .categroy-check-desc {
                    font-size: 12px;
                    color: #8f96a0;
                    padding: 0.106667rem 0 0.266667rem 0;
                }
                .categroy-content {
                    border-top: 1px solid #f8f8f8;
                    .categroy-total {
                        position: relative;
                        line-height: 50px;
                        padding: 0 15px;
                    }
                    .categroy-total>span {
                        color: #5f6670;
                        font-size: 14px;
                    }
                    .categroy-total>div {
                        position: absolute;
                        right: 0.266667rem;
                        display: inline-block;
                        color: #5f6670;
                        font-size: 14px;
                    }
                    .iconfont {
                        margin-right: 3px;
                        font-size: 14px;
                        color: #4990E2;
                    }

                    .categroy-items {
                        background-color: #fafafa;
                        display: none;
                        li {
                            color: #757f89;
                            font-size: 14px;
                            height: 35px;
                            line-height: 35px;
                            padding: 0 20px 0 20px;
                            border-top: 1px solid #f3f5f8;
                            position: relative;
                            .item-icon{
                                position: absolute;
                                right: 20px;
                                font-size: 14px;
                            }
                            .icon-common-chahao {
                                color: red;
                            }
                            .icon-common-duigou {
                                color: green;
                            }
                        }
                    }
                }
            }
        }

        .show-car-icon img {
            margin-right: 10px;
            width: 120px;
            height: auto;
        }
        .car-color {
            width: 14px; /*14px*/
            height: 14px;
            display: inline-block;
            border-radius: 50%;
            margin-top: 4px;
            margin-right: 4px;
            border: 1px solid white;
        }
    }
}
</style>

